<template>
  <div class="custom-swiper">
    <swiper
      :slides-per-view="3"
      :space-between="50"
      direction="vertical"
      class="custom-swiper-container"
      :style="swiperStyle"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change222');
    };

    // Calculate the custom height for each slide based on the index
    const swiperStyle = (index) => {
      const baseHeight = 200; // Base height for each slide
      const heightVariation = 50; // Height variation between slides
      const height = baseHeight + index * heightVariation;
      return {
        height: `${height}px`,
      };
    };

    return {
      onSwiper,
      onSlideChange,
      swiperStyle,
    };
  },
};
</script>

<style scoped>
.custom-swiper-container {
  perspective: 1200px; /* Perspective for 3D effect */
}

.custom-swiper-slide {
  transform-style: preserve-3d; /* Enable 3D transform */
  transition: transform 0.5s; /* Add smooth transition */
}

.custom-swiper-slide-active {
  transform: translateZ(200px); /* Apply translation on active slide */
}

.custom-swiper-slide-next,
.custom-swiper-slide-prev {
  transform: translateZ(-200px); /* Apply translation on next/prev slides */
}

.custom-swiper-slide:not(.custom-swiper-slide-active) {
  opacity: 0.5; /* Reduce opacity of non-active slides */
}

.custom-swiper-slide:not(.custom-swiper-slide-active):hover {
  opacity: 1; /* Restore opacity on hover */
}

/* Additional styling to customize the appearance */
.custom-swiper {
  height: 400px;
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
}
</style>